<!--
 * @Author: your name
 * @Date: 2021-03-04 11:35:38
 * @LastEditTime: 2021-03-05 09:46:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solax-cloud-system\src\views\companyindex\organizeView\organizeView.vue
-->
<template>
    <div class="organizeView-main-box-big">
        <!-- <baseNumberSlow :num='num ||0' :length='8'></baseNumberSlow> -->
        <div class="organizeView-header-main-box"> 
        </div>
        <div class="organizeView-content-main-box">
            <div class="organizeView-left-box"></div>
            <div class="organizeView-center-box">
                <div class="dataNums-center">
                    <baseNumberSlow :num='num ||0' :length='6'></baseNumberSlow>
                </div>
                <div class="ecahrts-word-map" id='ecahrts-word-map'>
                    
                </div>
            </div>
            <div class="organizeView-right-box"></div> 
        </div>
    </div>
</template>

<script>
import baseNumberSlow from '@/components/common/baseNumberSlow.vue'
export default {
    components: {
        baseNumberSlow
    },
    props: {

    },
    data() {
        return {
            num:''
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        let that = this
        setInterval(() => {
            that.num = this.getRandomNumber(1,999999)
            
        }, 5000)
        this.initEchartMap()
    },
    methods: {
        initEchartMap(){
            let res = require('../../../assets/mapApi/data.json')
            let namemap = res.namemap
            let dataArr = res.dataArr
            this.drawChart(namemap, dataArr)
        },
        drawChart (name, data) {
            let chart = this.echarts.init(document.getElementById('ecahrts-word-map'))
            window.addEventListener('resize', function () {
                chart.resize()
            })
            chart.setOption({
                // 图表主标题
                title: {
                text: '世界地图', // 主标题文本，支持使用 \n 换行
                top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
                left: 'center', // 值: 'left', 'center', 'right' 同上
                textStyle: { // 文本样式
                    fontSize: 24,
                    fontWeight: 600,
                    color: '#fff'
                }
                },
                // grid: {
                //     left:'10%',
                //     right:'15%',
                //     bottom:'15%'
                // },
                // 提示框组件
                tooltip: {
                trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
                // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                // 使用函数模板  传入的数据值 -> value: number | Array
                formatter: function (val) {
                    return val.data.name + ': ' + val.data.value
                }
                },
                // 视觉映射组件
                visualMap: {
                    type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
                    show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
                    // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
                    // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
                    min: 0,
                    max: 2000000,
                    // 文本样式
                    textStyle: {
                        fontSize: 14,
                        color: '#fff'
                    },
                    realtime: false, // 拖拽时，是否实时更新
                    calculable: true, // 是否显示拖拽用的手柄
                    // 定义 在选中范围中 的视觉元素
                    inRange: {
                        color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 图元的颜色
                    }
                },
                series: [
                {
                    type: 'map', // 类型
                    // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
                    name: '世界地图',
                    mapType: 'world', // 地图类型
                    // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
                    roam: true,
                    center: [0, 30.71], //中心点
                    zoom:1.3, //放大倍数
                    // 图形上的文本标签
                    label: {
                        show: false // 是否显示对应地名
                    },
                    // 地图区域的多边形 图形样式
                    itemStyle: {
                        areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
                        borderWidth: 0.5, // 描边线宽 为 0 时无描边
                        borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
                        borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                    },
                    // 高亮状态下的多边形和标签样式
                    emphasis: {
                    label: {
                        show: true, // 是否显示标签
                        color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                    },
                    itemStyle: {
                        areaColor: '#FF6347' // 地图区域的颜色
                    }
                    },
                    // 自定义地区的名称映射
                    nameMap: name,
                    // 地图系列中的数据内容数组 数组项可以为单个数值
                    data: data
                }
                ]
            })
            chart.on('click', function (params) {
               console.log(params,'params');
            });
        },
        getRandomNumber (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
    },
};
</script>

<style  lang="less" scoped>
.organizeView-main-box-big{
    width: 100%;
    background: url(../../../assets/img/bg.png);
    background-size: 100% auto;
    .organizeView-header-main-box{
        width: 100%;
        height: 73px;
        background-color: pink;
        opacity: 0.3;
    }
    .organizeView-content-main-box{
        width: 100%;
        display: flex;
        height: 1000px;
        .organizeView-left-box,
        .organizeView-right-box{
            width: 470px;
            background-color: skyblue;
            opacity: 0.3;
        }
        .organizeView-center-box{
            flex: 1;
            .dataNums-center{
                width: 40%;
                margin: 0 auto;
            }
            .ecahrts-word-map{
                width: 100%;
                height: 600px;
            }
        }
    }
}
</style>
